<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        height: 100%;
        padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
    }

    .flex {
        display: flex;
    }

    .flex-row {
        flex-direction: row;
    }

    .flex-column {
        flex-direction: column;
    }

    .flex-fluid {
        flex-wrap: wrap;
    }

    .center {
        justify-content: center;
        align-items: center;
    }

    .column-center-top {
        align-items: center;
    }

    .column-center-bottom {
        justify-content: flex-end;
        align-items: center;
    }

    .column-center-left {
        justify-content: center;
        align-items: flex-start;
    }

    .column-center-right {
        justify-content: center;
        align-items: flex-end;
    }

    

    .column-left-bottom {
        justify-content: flex-end;
        align-items: flex-start;
    }

    .column-right-bottom {
        justify-content: flex-end;
        align-items: flex-end;
    }

    .row-space-between {
        justify-content: space-between;
        align-items: center;
    }

    .row-center-top {
        justify-content: center;
        align-items: flex-start;
    }

    .row-center-bottom {
        justify-content: center;
        align-items: flex-end;
    }

     

    .row-center-right {
        justify-content: flex-end;
        align-items: center;
    }

    

    .row-right-top {
        justify-content: flex-end;
        align-items: flex-start;
    }

     
    .row-right-bottom {
        justify-content: flex-end;
        align-items: flex-end;
    }

    .flex-1 {
        flex: 1;
    }
    .parent{
        height: 100%;
    }
    .body{
        background-color: aqua;
    }
    .footer{
        height: 50px;
        background-color: blue;
        padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

    }
</style>

<body>
    <div class="parent flex flex-column">
        <div class="flex-1 body"></div>
        <div class="footer"></div>
    </div>
</body>

</html>